<template>
  <!--船舶过闸轨迹组件，只需传入coloum和tabledata即可-->
  <!--  嵌套的 dialog  append-to-body 必须为true 2023-4-21 08:53:30 add yg-->
  <!--  写死 宽度-->
  <el-dialog
    width="1660px"
    title="船舶过闸记录"
    :visible.sync="dialogVisible"
    :before-close='closeDialog'
    :append-to-body="true"
    class="my-dialog-class"
    @close="closeDialog"

  >
    <my-table
      style="width: 100%;"
      max-height="650px"
      ref="elTableList"
      :show-page="true"
      :columns="columns"
      :show-index="false"
      :table-data="tableData"
      :loading="false"
      :headerClass="{
          headerBg: '#f7f7f7',
          headerColor: '#333333'
        }"
      @handlePageChange="handlePageChange"
    >
      <el-table-column
        slot="djzt"
        label="状态"
        align="center"
        min-width="100"
        width="100"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.djzt | returnDzjt}}</span>
        </template>
      </el-table-column>

      <el-table-column
        slot="sfcd"
        label="是否船队"
        align="center"
        min-width="70"
        width="70"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.sfcd == 1 ? '船队' : '单船' }}</span>
        </template>
      </el-table-column>

    </my-table>


    <div slot="footer" class="dialog-footer">
      <el-button class="my-close-btn" @click="closeDialog">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
//2023-4-21  过闸记录 要求 分页, 倒叙排列,
//所以获取数据应该在 这里获取,而不是 调用 过闸记录对话框时直接传入table数据
//待更改
//
import {getPassLockShipList} from "@/api/dispatch/infoQueryManagement/passLockShipQuery";

export default {
  name: "index",
  props: {
    cmch:{
      required:true,
      type:String,
    },
    cbid:{
      required:true,
      type:String,
    },

    dialogVisible: {
      type: Boolean,
      default: false
    },
    dialogWidth: {
      type: String,
      default: ''
    },

    //参考columns 格式
    columns: {
      type: Array,
      default() {
        return  [
          {
            label: '船名船号',
            prop: 'cmch',
            align: 'center',
            // width:120,
          },
          {
            label: '登记号',
            prop: 'djh',
            align: 'center',
            width: 80,
          },
          {
            label: '状态',
            prop: 'djzt',
            slot:'djzt',
            align: 'center',
          },
          {
            label: '是否船队',
            prop: 'sfcd',
            slot: 'sfcd',
            align: 'center',
          },
          {
            label: '计费基数',
            prop: 'jfjs',
            align: 'center',
            width: 70,
          },
          {
            label: '船闸名称',
            // prop: 'czmc',
            prop: 'czs',
            align: 'center',
            width: 100,
          },
          {
            label: '起点',
            // prop: 'qd',
            prop:'yjqd',
            align: 'center',
            width: 100,
          },
          {
            label: '讫点',
            // prop: 'zd',
            prop: 'yjzd',
            align: 'center',
            width: 100,
          },
          {
            label: '登记人',
            prop: 'djr',
            align: 'center',
            width: 70,

          },
          {
            label: '登记时间',
            prop: 'djsj',
            align: 'center',
            width: 150,
          },
          {
            label: '缴费人',
            prop: 'jfr', //字段正确
            align: 'center',
            width: 70,
          },
          {
            label: '缴费时间',
            prop: 'jfsj',//字段正确
            align: 'center',
            width: 150,
          },
          {
            label: '调度人',
            prop: 'ddr',
            align: 'center',
            width: 70,

          },
          {
            label: '调度时间',
            prop: 'ddsj',
            align: 'center',
            width: 150,
          },
          {
            label: '过闸确认人',
            prop: 'gzqrr',
            align: 'center',
            width: '84px',
          },
          {
            label: '过闸确认时间',
            // prop: 'gzqrsj', //没有这个 ,确认用gzsj
            prop: 'gzsj',
            align: 'center',
            width: '150px',
          },
        ]
      }
    },
  },
  data() {
    return {
      tableData: {

      },
      searchParams:{
        cmch: '',
        cbid: '',
        pageNo:1,
        pageSize: 10,
      },
      startEndPointData:[],
    }
  },
  mounted() {
    this.searchParams.cmch = this.cmch;
    this.searchParams.cbid = this.cbid;
    if (this.cmch && this.cbid){
      this.toGetShipHistory()
    }
    this.getStartEnd()
  },
  filters:{
    //<!--"djzt": null, // 登记状态（0登记/1已调/2退费/3延时/4延时恢复/5过号/6过号恢复/7确认过闸/8销号-->
    returnDzjt: function (value){
      // if (!value) return ''
      if (value == '0') return '登记';
      else if (value == '1') return '已调';
      else if (value == '2') return '退费';
      else if (value == '3') return '延时';
      else if (value == '4') return '延时恢复';
      else if (value == '5') return '过号';
      else if (value == '6') return '过号恢复';
      else if (value == '7') return '过闸';
      else if (value == '8') return '销号';
      else if (value == '9') return '缴费';
      else {
        return ''
      }
    }
  },
  methods: {
    handlePageChange(pageInfo){
      console.log(pageInfo)
      // page, size
      this.searchParams.pageNo = pageInfo.page
      this.searchParams.pageSize = pageInfo.size
      this.toGetShipHistory()
    },
    async toGetShipHistory(){
      try {
        let ret = await getPassLockShipList(
          this.searchParams
        )
        console.log(ret,'过闸记录结果')
        if (ret && ret.code== 200){
          this.tableData ={data: ret.data.records ||[], total: ret.data.total};
        }
      }catch (e){
        this.$message.error('过闸记录查询失败!')
      }
    },

    //现在给的 起讫点 是数组,第一个是一级起讫点的数组, 第二个是二级起讫点的数组,
    //最终格式还没有定下来,
    async getStartEnd(){
     let r = await this.initDictOptionsUtil('startEndPoint')
      console.log(r,'起讫点信息')
    },

    // 关闭弹窗操作
    closeDialog() {
      this.$emit('closeDialog')
      // this.$emit('update:dialogVisible', false)
    },
  }
}
</script>

<style scoped>
.my-dialog-class {
  display: flex;
  align-items: center;
  justify-content: center;
}

.my-dialog-class >>> .el-dialog {
  margin-top: 0;
}

.my-dialog-class >>> .el-table div.cell {
  padding: 0 !important;
  font-weight: normal;
}

.my-dialog-class >>> .el-dialog__body {
  padding: 10px;
}

.my-close-btn {
  padding: 13px 26px;
  background-color: #0035b8;
  color: white;
}


</style>
